<template>
  <div>
    <el-container>
      <el-aside width="28%">
        <h2>搜索</h2>
        <el-input v-model="name" placeholder="请输入文件名" prefix-icon="el-icon-search"></el-input>
        <h2 style = "margin-top:10%;">清除数据</h2>
        <el-col :span="12" style = "margin-top:5%;">
            <el-menu class="el-menu-vertical-demo" @select = "select">
                <el-menu-item index="1">
                    <span slot="title">过去一天</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <span slot="title">过去三天</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <span slot="title">过去一周</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <span slot="title">时间不限</span>
                </el-menu-item>
            </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <h2>所有文件</h2>
        <div v-for = "(item,index) in times" :key = "index">
            <el-card class="box-card" style = "margin-top:2%;">
                <div slot="header" class="clearfix">
                    <span>{{item}}</span>
                </div>
                <div v-for="(it,index) in filter(item,list)" :key="index" class="text item">
                  <el-descriptions border :column='2' size = "small">
                    <el-descriptions-item  label="文件名"><el-tag size="small" effect ="dark">{{it.name}}</el-tag></el-descriptions-item>
                    <el-descriptions-item  label="操作" :contentStyle="{'text-align': 'center'}"><el-tag type="warning"><i class="el-icon-delete" @click = deleteOne(it.id,it.name,it.time)></i></el-tag></el-descriptions-item>
                    <el-descriptions-item  label="下载链接"><el-tag type="success"><i class = "el-icon-link" @click = download(it.name,it.address)>{{it.address}}</i></el-tag></el-descriptions-item>
                  </el-descriptions>
                </div>
                
            </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import FileSaver from 'file-saver';
import {getBefore} from '../utils/time';

export default {
   name:'records',
   data(){
       return {
         name:'',
         times:[],
         list:[],
         listCopy:[]
       }
   },

   created(){
       this.getAllTimes();
       this.getAllFiles();
   },

   watch:{
       name(newName){
           console.log(newName);
           if(!newName){
              this.list = this.listCopy;
           }
           else{
              this.list = this.list.filter(item => {
                  return item.name.includes(newName);
              })
           }
       }
   },

   methods:{
       getAllTimes(){
          let email = localStorage.getItem('email');
          this.$axios.get(`http://119.91.81.28:1337/file-lists?uploadBy=${email}`).then(res => {
              console.log(res);
              res.data.forEach(item => {
                  this.times.push(item.created_at.substr(0,10));
              })
              this.times = [...new Set(this.times)].sort(function(a,b){
                  if(a > b){
                      return -1;
                  }
                  else if(a < b){
                      return 1;
                  }
                  else{
                      return 0;
                  }
              });
              console.log(this.times);
          },err => {
              console.log(err);
          })
       },

       getAllFiles(){
          let email = localStorage.getItem('email');
          this.$axios.get(`http://119.91.81.28:1337/file-lists?uploadBy=${email}`).then(res => {
              console.log(res);
              res.data.forEach(item => {
                  let obj = {};
                  obj.id = item.id;
                  obj.relatedId = item.type[0].id;
                  obj.name = item.name;
                  obj.time = item.created_at.substr(0,10);
                  obj.address = 'http://119.91.81.28:1337' + item.type[0].url;

                  this.list.push(obj);
              })
              this.listCopy = this.list;
              console.log(this.list);
          },err => {
              console.log(err);
          })
       },

       filter(item,list){
           return list.filter(value => {
               return item == value.time;
           })
       },

       download(name,url){
          FileSaver.saveAs(url,name);
       },

       select(key){
          switch (key){
              case '1':
                this.deleteDay(1);
                break;
              case '2':
                this.deleteDay(3);
                break;
              case '3':
                this.deleteDay(7);
                break;
              case '4':
                this.deleteDay('all');
                break;
          }
       },

       deleteDay(day){
          let arr = [];
          if(day == 1){
              arr.push(getBefore(day,new Date()));

              this.list.forEach(item => {
                  if(arr.includes(item.time)){
                     this.deleteOne(item.id,'',item.time);
                  }
              })
          }
          else if(day == 3){
              for(let i = 1;i <= 3;i++){
                arr.push(getBefore(i,new Date()));
              }

              this.list.forEach(item => {
                  if(arr.includes(item.time)){
                     this.deleteOne(item.id,'',item.time);
                  }
              })
          }
          else if(day == 7){
              for(let i = 1;i <= 7;i++){
                arr.push(getBefore(i,new Date()));
              }

              this.list.forEach(item => {
                  if(arr.includes(item.time)){
                     this.deleteOne(item.id,'',item.time);
                  }
              })
          }
          else{
              this.list.forEach(item => {
                this.deleteOne(item.id,'',item.time); 
              })
          }
       },

       deleteOne(id,name,time){
           console.log(id);
           this.$axios.delete('http://119.91.81.28:1337/file-lists/' + id).then(response => {
             console.log(response);
             if(name){
                this.$message({
                  type:'success',
                  message:`已删除${name}`
                })
             }
             let flag = false;
             this.list = this.list.filter(value => {
                 return value.id != id;
             })

             this.list.forEach(item => {
                 if(item.time == time){
                    flag = true;
                 }
             })

             if(!flag){
                 this.times = this.times.filter(item => {
                     return item != time;
                 })
             }

             this.listCopy = this.list;
           },err => {
               console.log(err);
           })
           
       }
   },
}
</script>

<style scoped>
  .el-container{
    width:100%;
    height:97vh; 
  }
  .el-aside {
    color: #333;
    border-right:1px solid gray;
  }
  .el-input{
      width:60%;
  }
  .el-main {
    color: #333;
  }
  .my-label {
    background: #E1F3D8;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 5%;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 60%;
  }
</style>